@charset "utf-8";
@import "init.scss";
@import "common.scss";
.main {
    width: 1064px;
    height: 2442px;
    background-color: #000000;
    color: #ffffff;
    margin: 0 auto;
    .my_page_header{
       border-bottom: 2px solid #464545;
       padding: 0 46px;
       ul,div{
            display: inline-block;
            vertical-align: middle;
        }
        span{
            color: #FFFFFF;
            font-size: 18px;
            line-height: 70px;
            vertical-align: middle;
        }
        ul{
            li{
                margin-left: 40px;
                a{
                    font-size: 18px;
                    color: #7d7c7c;
                    line-height: 70px;
                    &:hover{
                        color: #0dafd2;
                    }
                }
            }
        }
        .search{
            display: inline-block;
            width: 170px;
            height: 24px;
            margin-left: 98px;
            border: 1px solid #545454;
            form{
                width: 100%;
                height: 100%;
                input{
                    width: 128px;
                    height: 22px;
                    vertical-align: middle;
                    background: #000000;
                    padding-left: 6px;
                    border: none;
                    color: #FFFFFF;
                    outline: none;
                }
                .icon-ziyuan{
                    background: #000000;
                    color: #878686 ;
                    border: none;
                    vertical-align: middle;
                    font-weight: bold;
                    outline: none;
                    &:hover{
                        cursor: pointer;
                    }
                }
            }
            
        }
        
    }
    .tuijian {
        margin: 0 40px;
        p:first-of-type {
            font-size: 33px;
        }
        .tuijianlan {
            border-bottom: 1px solid #4d4d4d;
            div {
                display: inline-block;
                margin: 0 5px 15px;
            }
            p {
                font-size: 12px;
                line-height: 36px;
            }
        }
    }
    .box {
        .head_box {
            width: 1064px;
            height: 334px;
            background: skyblue;
            margin: 0 auto;
        }
        .mid_box {
            width: 150px;
            height: 1150px;
            background-color: black;
            margin: 28px auto;
            .zuo_top {
                width: 205px;
                height: 1150px;
                .second_box {
                    width: 158px;
                    height: 525px;
                    background-color: #252525;
                    margin-left: 45px;
                    margin-top: 10px;
                    .second_box_title {
                        font-size: 14px;
                        color: #0dafd2;
                        text-align: center;
                    }
                    .second_box_title p {
                        line-height: 40px;
                        vertical-align: middle;
                    }
                    .second_box_content {
                        width: 140px;
                        margin: 0 auto;
                    }
                    .second_little_box {
                        margin: 5px 10px;
                        padding-top: 5px;
                        .left_img {
                            display: inline-block;
                            width: 52px;
                            img {
                                width: 100%;
                            }
                        }
                        .right_time {
                            display: inline-block;
                            font-size: 14px;
                            color: #747474;
                            vertical-align: top;
                        }
                    }
                }
            }
            .xuanze_box {
                width: 155px;
                margin-left: 44px;
            }
            ul {
                display: block;
                width: 156px;
                margin: 30 auto;
                color: #747373;
                font-size: 14px;
                line-height: 40px;
                text-align: center;
                li {
                    background: #252525;
                    border-bottom: 5px solid black;
                    padding: 0px 27px 0px 52px;
                    a{
                         color: #747373;
                    }
                    a:hover{
                        color: white;
                    }
                }
            }
            li:hover {
                color: #ffffff;
            }
            .zuo_mid {
                width: 156px;
                height: 481px;
                background: #252525;
                text-align: center;
                color: #139ab8;
            }
            .zuo_mid span:first-child {
                display: inline-block;
                font-size: 14px;
                margin: 12px auto;
            }
            .border_top {
                width: 135px;
                margin: 0 auto;
                border-top: 1px solid #444444;
            }
            .border_bot {
                border-bottom: 1px solid #444444;
                width: 135px;
                margin: 15px auto;
            }
            .img_mid_box {
                margin: 10px 0px 0 13px;
            }
            .img_mid {
                width: 156px;
                padding-top: 8px;
                .img_box {
                    width: 53px;
                    //      margin-top: 16px;
                }
                img {
                    width: 100%;
                }
                span {
                    font-size: 12px;
                    color: #747474;
                    margin: 0 28px 0 0px;
                }
            }
            .sp {
                font-size: 14px;
                margin-top: 5px;
            }
        }
        .gengduo {
            font-size: 14px;
            color: #11a1c1;
            width: 140px;
            height: 50px;
            line-height: 50px;
            margin-left: 10px;
            text-align: center;
            border-top: 1px solid #444444;
            border-bottom: 1px solid #444444;
            span:first-child {
                margin-left: 30px;
            }
        }
        .liulanshu {
            font-size: 12px;
            text-align: center;
            p {
                display: inline-block;
                margin: 10px 3px;
                color: #7d7d7d;
            }
        }
        .main_box {
            width: 810px;
            background-color: #FFFFFF;
            margin-right: 45px;
            margin-top: 28px;
            .chakanyaoqing {
                .chakan_title {
                    padding-left: 25px;
                    padding-top: 30px;
                    padding-bottom: 15px;
                    span:first-child {
                        color: #0dafd2;
                        font-size: 33px;
                        font-weight: bold;
                    }
                    span:nth-child(2) {
                        font-size: 14px;
                        color: #7d7c7c;
                    }
                }
            }
            .chakanyaoqing_box {
                width: 750px;
                margin: 0 auto;
                border-top: 1px solid #f0f0f0;
                padding-top: 25px;
                padding-bottom: 70px;
                .left_box {
                    width: 233px;
                    background-color: #f6f6f6;
                    .cookies_picture {
                        img {
                            width: 100%;
                        }
                    }
                    .picture_wenben {
                        text-align: center;
                        p:first-child {
                            font-size: 22px;
                            color: #4D4D4D;
                            line-height: 40px;
                        }
                        p:nth-child(2) {
                            font-size: 15px;
                            color: #676767;
                            line-height: 30px;
                        }
                        p:nth-child(3) {
                            font-size: 30px;
                            color: #4d4d4d;
                            position: relative;
                            line-height: 50px;
                        }
                        p:nth-child(3)::before {
                            content: "";
                            background-color: #c5c5c5;
                            height: 1px;
                            width: 60px;
                            display: block;
                            position: absolute;
                            left: 20px;
                            bottom: 15px;
                        }
                        p:nth-child(3)::after {
                            content: "";
                            background-color: #c5c5c5;
                            height: 1px;
                            width: 60px;
                            display: block;
                            position: absolute;
                            right: 20px;
                            bottom: 15px;
                        }
                        p:nth-child(4) {
                            font-size: 12px;
                            color: #4D4D4D;
                            line-height: 40px;
                        }
                        .little_icon{
                        display: inline-block;
                        margin-bottom: 12px;
                span{
                    color: #b3b3b3;
                    font-size: 12px;
                }}
                        
                        
                        
                        
                    }
                }
                .right_box {
                    width: 505px;
                    border: 1px solid #e6e6e6;
                    background-color: #f6f6f6;
                    .yaoqing {
                        margin: 0px 25px 0px 20px;
                        font-size: 14px;
                        padding: 10px 0;
                        border-bottom: 1px solid #d4d4d4;
                        .yaoqing_img {
                            width: 53px;
                            height: 57px;
                            margin: 0 8px;
                        }
                        img {
                            width: 100%;
                        }
                        .yaoqingren {
                            p:first-child {
                                color: #4d4c4c;
                            }
                            p:nth-child(2) {
                                color: #666565;
                            }
                        }
                        .tijiaoanniu {
                            display: inline-block;
                            width: 60px;
                            height: 25px;
                            text-align: center;
                            p:first-child {
                                background-color: #0dafd2;
                                font-size: 14px;
                                color: #def0f6;
                                margin: 5px 0;
                            }
                            p:nth-child(2) {
                                background-color: #b7b7b7;
                                font-size: 14px;
                                color: #def0f6;
                                margin: 5px 0;
                            }
                            p:hover:nth-child(2) {
                                background-color: #0dafd2;
                            }
                        }
                    }
                }
            }
            .huodongyaoqingliuyan {
                position: relative;
                width: 755px;
                margin: 0 auto;
                .liuyan_title p {
                    line-height: 50px;
                    font-size: 20px;
                    color: #0dafd2;
                }
                .liuyanren_box {
                    .liuyanren {
                        padding-top: 12px;
                        margin-bottom: 20px;
                        border-top: 1px solid #f0f0f0;
                        .liuyanrentu {
                            width: 53px;
                            height: 57px;
                            img {
                                width: 100%;
                            }
                        }
                        .liu {
                            margin-left: 5px;
                            p:first-of-type {
                                font-size: 14px;
                                color: #4d4c4c;
                            }
                            p:nth-of-type(2) {
                                font-size: 12px;
                                color: #666565;
                            }
                        }
                    }
                    .liuyanshijian {
                        margin-bottom: 12px;
                        p {
                            font-size: 12px;
                            color: #929191;
                        }
                        label{
                            font-size: 12px;
                             color: #929191;
                        }
                        
                    }#yingchang:checked+.xuanxianka_box {
                            display: block;
                        }
                }
                .xuanxianka_box {
                    display: none;
                    border: 1px solid #bfbfbf;
                    padding: 12px 12px;
                    position: relative;
                    .huifu {
                        .huifutouxian {
                            width: 35px;
                            height: 37px;
                            img {
                                width: 100%;
                                ;
                            }
                        }
                        .huifushurukuang {
                            form {
                                .wenbenshuru {
                                    width: 678px;
                                    height: 36px;
                                    font-size: 12px;
                                }
                                .tijiaogongneng {
                                    margin: 20px 0;
                                    input:first-of-type {
                                        width: 80px;
                                        height: 26px;
                                        color: #def0f6;
                                        background-color: #0dafd2;
                                        font-size: 14px;
                                    }
                                    label {
                                        color: #7d7c7c;
                                        font-size: 12px;
                                    }
                                    .churutu {
                                        span {
                                            font-size: 12px;
                                            color: #929191;
                                        }
                                    }
                                }
                            }
                        }
                    }
                    .liuyanren {
                        padding-top: 12px;
                        margin-bottom: 20px;
                        border-top: 1px solid #f0f0f0;
                        .liuyanrentu {
                            width: 53px;
                            height: 57px;
                            img {
                                width: 100%;
                            }
                        }
                        .liu {
                            margin-left: 5px;
                            p:first-of-type {
                                font-size: 14px;
                                color: #4d4c4c;
                            }
                            p:nth-of-type(2) {
                                font-size: 12px;
                                color: #666565;
                            }
                        }
                    }
                    .liuyanshijian {
                        margin-bottom: 12px;
                        p {
                            font-size: 12px;
                            color: #929191;
                        }
                    }
                }
                .xuanxianka_box::before{
                    content: "";
                    width: 15px;
                    height: 15px;
                    background-color: #FFFFFF;
                    border-top: 1px solid #bfbfbf;
                     border-left: 1px solid #bfbfbf;
                    position: absolute;
                    transform:  rotate(45deg);
                    top: -9px;
                    right: 20px;
                    
                    
                }
                
            .fanye{
          a{font-size: 12px;
                   color: #a19f9f;
                   width: 64px;line-height: 28px;
               }
            dl{
                font-size: 12px;
                line-height: 20px;
                color: #a19f9f;
                text-align: center;
               a{
                   color: #a19f9f;
               }
              
                dt{
                    width: 64px;
                line-height: 28px;
                position: relative;
                   
                }
                
                dt::before{
                       content: "";
                       border-top: 3px solid #7d7c7c;
                       border-right: 3px solid transparent;
                       border-bottom: 3px solid transparent;
                       border-left: 3px solid transparent;
                       position: absolute;
                       right: 4px;
                       top: 14px;
                   } 
                    dd{
                       width: 64px;
                       display: none;
                       transform: scale(0);
                   }
                  
                   
                   
            
            }dl:hover dd{
                       animation-name: fan;
                       animation-duration: 0.3s;
                       animation-fill-mode: forwards;
                       display: block;
                   } 
                   @keyframes fan{
                       0%{transform: scale(0);}
                       50%{transform: scale(0.8);}
                       100%{transform: scale(1);}
                       
                   }
            
            
            
        }}
        }
    }
}